import { ReactNode, HTMLAttributes } from 'react';

/**
 * Тип для выравнивание элементов по поперечной оси контейнера.
 * @typedef {'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'} Alignment
 */
type Alignment = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';

/**
 * Тип для направление осей флекс-контейнера.
 * @typedef {'row' | 'column' | 'row-reverse' | 'column-reverse'} Direction
 */
type Direction = 'row' | 'column' | 'row-reverse' | 'column-reverse';

/**
 * Тип для порядка переноса элементов, если они не помещаются в одну строку.
 * @typedef {'nowrap' | 'wrap' | 'wrap-reverse'} Wrap
 */
type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';

/**
 * Тип для выравнивания элементов по основной оси контейнера.
 * @typedef {'flex-start' | 'flex-end' | 'center'} Justify
 */
type Justify =

  | 'flex-start'

  | 'flex-end'

  | 'center'

  | 'space-between'

  | 'space-around'

  | 'space-evenly'
  ;

/**
* Тип для выравнивания контента по поперечной оси контейнера.
* @typedef {'flex-start' | 'flex-end' | 'center'}
*/
type AlignContent =

  | 'stretch'

  | 'flex-start'

  | 'flex-end'

  | 'center'

  | 'space-between'

  | 'space-around'
  ;

/**
 * @typedef {Object} Ilex - Интерфейс для стилизованного Flex компонента.
 * @property {Direction} flexDirection - Направление осей флекс-контейнера.
 * @property {ReactNode} children - Дочерние элементы компонента.
 * @property {Alignment} alignItems - Выравнивание элементов по поперечной оси контейнера.
 * @property {AlignContent} alignContent - Выравнивание контента по поперечной оси контейнера.
 * @property {Justify} justifyContent - Выравнивание элементов по основной оси контейнера.
 * @property {Wrap} flexWrap - Перенос элементов, если они не помещаются в одну строку.
 * @property {string} flexFlow - Комбинированный свойство, объединяющее flex-direction и flex-wrap.
 * @property {string} flex - Гибкое управление размером элемента.
 * @property {number} flexShrink - Фактор сжатия элементов в контейнере.
 * @property {number} flexGrow - Управление увеличением размера элемента внутри контейнера.
 * @property {string} flexBasis - Управление исходным размером элемента внутри контейнера.
 * @property {number} order - Порядок элемента внутри контейнера.
 * @property {Alignment} alignSelf - Выравнивание элемента по поперечной оси контейнера.
 * @property {boolean} inline - Указывает, является ли компонент блочным или строчным.
 * @property {CSSObject} inlineMixin - Дополнительные стили для строчного компонента.
 */
export interface IFlex extends HTMLAttributes<HTMLDivElement> {
  flexDirection?: Direction;
  children?: ReactNode;
  alignItems?: Alignment;
  alignContent?: AlignContent;
  justifyContent?: Justify;
  flexWrap?: Wrap;
  flexFlow?: string;
  flex?: string;
  flexGrow?: number;
  flexShrink?: number;
  flexBasis?: string;
  order?: number;
  alignSelf?: Alignment;
  inline?: boolean;
  className?: string;
}

/**
 * @typedef {Object} IStyledFlex - Интерфейс для стилизованного Flex компонента.
 */
export type TStyledFlex = Omit<IFlex, 'children'>;
